<template>
    <el-select placeholder="请选择/Please Choose" v-model="value" :multiple="multiple" collapse-tags filterable clearable
        @change="handleChange">
        <!-- 加载状态 -->
        <template #prefix>
            <el-loading v-if="loading" size="small"></el-loading>
        </template>

        <!-- 空状态处理 -->
        <el-option v-if="!loading && (!items || items.length === 0)" value="" disabled>
            暂时无数据
        </el-option>

        <!-- 选项列表 -->
        <el-option v-for="item in items" :key="item.id" :value="item.zjh" :title="getOptionTitle(item)"
            class="custom-option">
            <div class="option-content">
                <div class="option-code">{{ item.zjh }}</div>
                <div class="option-labels">
                    <div class="label chinese"><vp-label zh="中文描述" en="CN Desc." />： {{ item.zwms }}</div>
                    <div class="label english"><vp-label zh="英文描述" en="EN Desc." />： {{ item.ywms }}</div>
                </div>
            </div>
        </el-option>
    </el-select>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue'
import request from '/@/utils/request'

export default defineComponent({
    name: 'basedataAtaSelect',
    emits: ['selected'],
    props: {
        value: [],
        multiple: {
            type: Boolean,
            default: false
        }
    },
    setup(props, context) {
        const state = reactive({
            loading: false,
            items: [] as any[],

            selectAll: true,
        })
        const loadData = () => {
            state.loading = true
            request.get('/basicData/ata/list').then(res => {
                state.items = res?.data || []
            }).finally(() => {
                state.loading = false
            })
        }
        const selectRef = ref();
        onMounted(() => {
            loadData();
        })

        const handleChange = (data: any) => {
            context.emit("selected", data.zjh);
        }
        const getOptionTitle = (item: any) => {
            if (!item) return '';
            return `${item.zjh} (中文: ${item.zwms || '-'}) (英文: ${item.ywms || '-'})`;
        }

        return {
            ...toRefs(state),
            ...toRefs(props),
            selectRef,
            handleChange,
            getOptionTitle,
        }
    }
})
</script>
<style scoped>
.custom-select {
    width: 100%;
}

.custom-option {
    height: auto !important;
    min-height: 60px;
    padding: 10px 15px !important;
}

/* 调整选项内容区域样式 */
.option-content {
    display: flex;
    flex-direction: column;
    padding: 4px 0;
    line-height: 1.6;
}

.option-code {
    font-weight: 500;
    margin-bottom: 4px;
}

.option-labels {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    line-height: 1.5;
}

.label {
    padding: 2px 6px;
    border-radius: 2px;
    white-space: nowrap;
}

.label.chinese {
    color: #1890ff;
    background-color: rgba(24, 144, 255, 0.1);
}

.label.english {
    color: #52c41a;
    background-color: rgba(82, 196, 26, 0.1);
}
</style>